<template>
	<view class="container">
		<u-navbar  title="匿名举报" placeholder="true" titleStyle="color:white;font-weight:bold" :bgColor="background">
			<view class="slot-wrap" slot="left">
				<u-icon name="home"  color="white" size="40" @click="returnHome"></u-icon>
			</view>
		</u-navbar>
	    <view class="reportUser">
			<view class="titleContainer">
				<text class="title">举报信息</text>
			</view>
			<view class="userForm">
				<u-notice-bar :text="textNotice" mode="closable"></u-notice-bar>
				<u--form 
					:model="form" 
					ref="uForm"
					:rules="rules"
					labelWidth="78px"
				>
						<u-form-item  
							label="危害类型"
							borderBottom
							prop="harmTypeName"
							required
						>
							<u-input  v-model="form.harmTypeName" placeholder="请选择举报内容的危害类型" customStyle="width:1000px"   border="none" @focus="show = true;"></u-input>
		                    <u-picker  :show="show" :columns="List" keyName="label" @confirm="confirmHarmType" @cancel="cancelHarmType"></u-picker>
						</u-form-item>	
						<u-form-item  
							label="举报类型" 
							borderBottom
							prop="reportedTypeName"
							required
						>
							<u-input  v-model="form.reportedTypeName" placeholder="请选择举报内容的载体" customStyle="width:1000px"   border="none" @focus="showReportedType = true;"></u-input>
							<u-picker  :show="showReportedType" :columns="ListReportedType" keyName="label" @confirm="confirmReportedType" @cancel="cancelReportedType"></u-picker>
						</u-form-item>
						<u-form-item  
							label="网站名称" 
							borderBottom
							prop="name"
							required
						>
							<u-input v-model="form.name" placeholder="请输入网站名称" customStyle="width:1000px"   border="none"></u-input>
						</u-form-item>
						<u-form-item  
							label="详细网址" 
							borderBottom
							prop="extraContent"
							required
						>
					       <u-input v-model="form.extraContent" placeholder="请输入详细网址" customStyle="width:1000px"   border="none"></u-input>
						</u-form-item>
						<u-form-item  
						    label="详细内容" 
							borderBottom
							prop="reportContent"
							required
						>
							<u--textarea 
								v-model="form.reportContent" 
								placeholder="请输入详细内容" 
								border="surround" 
								maxlength="-1"
								height="250"
							>
							</u--textarea>
						</u-form-item>
						<u-form-item  
							label="附件" 
						>
							<u-upload
							    maxSize="10*1024*1024"
								:previewFullImage="true"
								:fileList="fileList"
								@afterRead="afterRead"
								@delete="deletePic"
								multiple
								:maxCount="10"
								width="250" 
								height="250"
							>
							</u-upload>
						</u-form-item>
						<u-form-item
							label="验证码"
							borderBottom
							prop="code"
							required
						>
							<u-input v-model="form.code" placeholder="请输入验证码"  border="none">
								<template slot="suffix">
									<u--image 
										:showLoading="true" 
										:src="src" 
										width="99px" 
										height="27px" 
										@click="click"
									>
									</u--image>
								</template>
							</u-input>
						</u-form-item>
					</u--form>
					<u-button type="primary" size="large" text="提 交" @click="submit">
					</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {HARM_TYPE_LIST,REPORT_TYPE_LIST} from '@/utils/constant.js'
	export default {
		data() {
			return {
				src:'',
				show:false,
				showReportedType:false,
				form:{
				  harmTypeName:'',
				  harmType:'',
				  reportedTypeName:'',
				  reportedType:'',
				  name:'',
				  extraContent:'',
				  reportContent:'',
				  fileIds:[],
				  code:'',
				  key:''
				},
				List:[HARM_TYPE_LIST],
				ListReportedType:[REPORT_TYPE_LIST],
				background: '#24A7FE',	
				fileList:[],
				fileIds:[],
				textNotice:'上传的附件总大小不能超过100M，总数量不能超过10个，单个附件大小不能超过10M',
				rules:{
					harmTypeName:[
						{
							required: true,
							message: '请选择危害类型'
						}
					],
					reportedTypeName:[
						{
							required: true,
							message: '请选择举报内容的载体'
						}
					],
					name:[
						{
							required: true,
							message: '请输入网站名称',
							trigger: 'blur'
						}
					],
					extraContent:[
						{
							required: true,
							message: '请输入详细网址',
							trigger: 'blur'
						}
					],
					reportContent:[
						{
							required: true,
							message: '请输入详细内容',
							trigger: 'blur'
						}
					],
				    code:[
						{
							required: true,
							message: '请输入验证码',
							trigger: ['change','blur']
						},
						{
							type:'number',
							message:'验证码必须为右图中计算数值结果',
							trigger:['change','blur']
						}
					]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getGraphic()
		},
		onShow() {
			console.log('Index page show');
			this.getGraphic()
		},
		methods:{
			returnHome(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
		    async getGraphic(){
				const res = await this.$api.verificatonCode.graphicVerificationCode()
				console.log(res);
				if(res.data.success===true){
					this.src=res.data.data.codeUrl
					this.form.key=res.data.data.key
				}
				console.log(this.src);
				console.log(this.form.key);
			},
			confirmHarmType(e) {
				this.form.harmTypeName = e.value[0].label;
				this.form.harmType=e.value[0].value;
				this.show= false;
			},
			cancelHarmType(){
				this.form.harmTypeName='';
				this.form.harmType='';
				this.show=false;
			},
			confirmReportedType(e){
				this.form.reportedTypeName=e.value[0].label;
				this.form.reportedType=e.value[0].value;
				this.showReportedType=false;
			},
			cancelReportedType(){
				this.form.reportedTypeName='';
				this.form.reportedType='';
				this.showReportedType=false;
			},
			deletePic(event){
				this[`fileList${event.name}`].splice(event.index, 1)
				console.log(this.fileList);
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				console.log(this.fileList);
				},
				uploadFilePromise(url) {
					return new Promise((resolve, reject) => {
						let a = uni.uploadFile({
							url: 'https://www.hn12377.gov.cn/api/material/upload', //文件服务器地址
							filePath: url,
							name: 'file',
							success: (res) => {
								res.data=JSON.parse(res.data)
								setTimeout(() => {
									resolve(res.data)
								}, 1000)
								console.log(res.data);
							}
						});
					})
				},
				click(){
					this.getGraphic()
				},
				submit(){
					console.log(this.fileList);
					for(let i=0;i<this.fileList.length;i++){
						this.fileIds.push(this.fileList[i].url.data.materialId)
					}
					console.log(this.fileIds);
					let submitForm={
						code:this.form.code,
						key:this.form.key,
						fileIds:this.fileIds,
						reportInfo:{
							harmType:this.form.harmType,
							reportedType:this.form.reportedType,
							platformId:1, //这个字段暂时搞不清楚什么意思
							name:this.form.name,
							webAddress:'',
							extraContent:this.form.extraContent,
							reportContent:this.form.reportContent,
							reporterId:'',
							reporterName:'',
							reporterSex:1,
							reporterPhone:'',
							reporterEmail:''
						},
						reportUser:{
							cityCode: "",
							countryCode: "",
							email: "",
							name: "",
							phone: "",
							provinceCode: "",
							sex: 1,
							token: ""
						}
					}
					this.$refs.uForm.validate().then(res => {
						this.$api.report.anonymousReport(submitForm,this.form.code,this.form.key).then(res=>{
						   console.log(res);
						   if(res.data.success===true){
							   this.fileList=[]
							   this.fileIds=[]
							   uni.showModal({
								title: '举报成功',
								content:'举报编号为'+res.data.data,
								confirmText:'点击查询',
								success:function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
										uni.navigateTo({
											url:'/pages/selectAnonymous/selectAnonymous'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
														}
							   })
						   }else{
							   this.fileList=[]
							   this.fileIds=[]
							   uni.showToast({
								title: '举报失败',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							   })
							   this.$refs.uForm.resetFields()
						   }
						})
					}).catch(errors => {
						uni.$u.toast('表单校验失败，请检查表单重新填写')
					})
				}
		}
	}
</script>
<style scoped lang="scss">
	.container{
		*{
			margin-bottom: 10rpx;
		}
		.slot-wrap{
			display: flex;
			align-items: center;
			margin-bottom: 0;
			      }
		.reportUser{
			.titleContainer{
				border-bottom: 1px solid lightgrey;
				padding-bottom: 7px;
				margin: 7px 18px;
				.title{
					font-weight: bold;
					width: 96px;
					height: 33px;
					color: rgba(16, 16, 16, 1);
					font-size: 24px;
					text-align: left;
					font-family: PingFangSC-regular;
				}
			}
			.userForm{
				margin: 7px 18px;
			}
		}
	}
</style>
